<html>
<head>
    <title>全球新型冠状病毒肺炎疫情分布</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/world.js"></script>


    <style>
        body {
            background: url("static/bg.jpeg") no-repeat;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-size: cover;
            color: #FFFFFF;
        }

        .nav {
            width: 100%;
            height: 50px;
            background-color: #021525;
            color: #FFFFFF;
            overflow: hidden;
            margin-left: 0px
        }

        #titleContainer {
            width: 500px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            display: inline;
            margin-left: 10px;
        }

        #textContainer {
            height: 50px;
            line-height: 50px;
            font-size: 10px;
            display: inline;
            float: right;
            margin-right: 10px;
        }

        #text, #text2 {
            display: block;
            line-height: 25px;
        }

        #text2 {
            float: right;
        }

        a:link, a:visited, a:hover, a:active {
            color: #FFFFFF
        }

        #rightPanel {
            position: fixed;
            width: 20%;
            height: 100%;
            right: 0;
            top: 50px;
            z-index: 2;
            padding-top: 7px;
            padding-left: 7px;
            background-color: rgba(1, 6, 17, 0.6);
        }

        #leftPanel {
            position: fixed;
            width: 25%;
            height: 91%;
            left: 0;
            top: 50px;
            z-index: 2;
            background-color: rgba(1, 6, 17, 0.6);
        }

        #centerPanel {
            background-color: rgba(1, 6, 17, 0.6);
            z-index: 2;
        }

        .rightTitleContainer {
            font-size: 10px;
            margin-top: 10px;
        }

        #{rightTitle-en:float:left}

        #quezhenContainer, #zhiyuContainer, #siwangContainer {
            float: left;
            text-align: center;
            margin-left: 20px;
            margin-right: 10px;

        }

        #quezhenNum, #zhiyuNum, #siwangNum {
            display: block;
            font-size: 30px;
            font-weight: 500;
        }

        #quezhenNum {
            color: #f23a3b;
        }

        #zhiyuNum {
            color: #178b50;
        }

        #siwangNum {
            color: #4e5a65;
        }

        .rightTitleContainerB {
            z-index: 300;
            position: fixed;
        }

        blockquote {
            padding: 0px 5px;
            margin: 0 0;
            font-size: 10px;
            border-left: 5px solid #1C86EE;
        }


        .newsList {
            padding-left: 20px;
        }

        .time {
            color: #666;
        }

        .title, .media {
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 10px;
        }

        table {
            margin: 0px 5px 0px 10px;
            font-size: 10px
        }

        #news::-webkit-scrollbar, #table::-webkit-scrollbar {
            display: none; /*隐藏滚动条*/
        }

        #centerHeader {
            left: 450px;
            position: absolute;
            top: 85px;
        }

        .nowConfirm, .confirm, .heal, .dead {
            float: left;
            text-align: center;
            margin-left: 15px;
            margin-right: 40px;
        }

        .nowConfirm .number, .confirm .number, .heal .number, .dead .number {
            font-size: 30px;
        }

        .nowConfirm .text, .confirm .text, .heal .text, .dead .text {
            font-size: 20px;
        }

        .nowConfirm .number {
            color: #f23a3b;
        }

        .confirm .number {
            color: #cc1e1e;
        }

        .heal .number {
            color: #178b50;
        }

        .dead .number {
            color: #4e5a65;
        }

        #map {
            left: 230px;
            top: 170px;
            width: 1000px;
            height: 500px;
            position: absolute;
        }

        .rightTitle-en {
            color: #666;
        }

        .btn-group {
            right: 290px;
            height: 50px;
            margin: 8px 0px;
            position: absolute;
        }

        #toChina, #toGlobal {
            background: rgba(32, 66, 82, 1);
            color: white;
            border: none;
            width: 90px;
        }

        #toGlobal {
            border-radius: 0 24px 24px 0;

            background: rgba(43, 91, 104, 1);
        }

        #toChina {
            border-radius: 24px 0 0 24px;
        }

    </style>
</head>

<body style="overflow-y: hidden">
<div class="row nav">
    <div id="titleContainer">
        <span>全球新型冠状病毒肺炎疫情分布 | </span>
        <span id="date">{{ date['today'] }}</span>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default" id="toChina">
            中&nbsp;国
        </button>
        <button type="button" class="btn btn-default" id="toGlobal">
            全&nbsp;球
        </button>
    </div>
    <div id="textContainer">
        <span id="text">数据来源：<a href="https://news.qq.com/zt2020/page/feiyan.htm#/global"
                                target="_blank">腾讯｜新冠肺炎疫情最新动态</a></span>
        <span id="text2">截至<span id="titleTime">&nbsp;{{ date['yesterday'] }}</span></span>
    </div>
</div>
</div>
<div class="row">
    <div id="leftPanel">
        <div class="rightTitleContainerB">
            <div class="rightTitleContainer">
                <blockquote>
                    <span class="rightTitle">当日新增概况</span>
                    <br/>
                    <span class="rightTitle-en"><span id="textTime1">{{ date['yesterday'] }}</span>0~24时</span>
                </blockquote>
            </div>
            <div id="numPanel">
                <div id="quezhenContainer">
                    <span id="quezhenNum">{{ statistics_data['nowConfirmAdd'] }}</span>
                    <span id="quezhenText">确诊</span>
                </div>
                <div id="zhiyuContainer">
                    <span id="zhiyuNum">{{ statistics_data['healAdd'] }}</span>
                    <span id="zhiyuText">治愈</span>
                </div>
                <div id="siwangContainer">
                    <span id="siwangNum">{{ statistics_data['deadAdd'] }}</span>
                    <span id="siwangText">死亡</span>
                </div>
            </div>
        </div>
        <div id="table" style="height:520px;overflow:auto;top:120px;position:absolute; overflow-x: hidden;">
            <table class="table">
                <thead>
                <tr>
                    <th style="width:20%"><span>地区</span></th>
                    <th>新增确诊</th>
                    <th>累计确诊</th>
                    <th>治愈</th>
                    <th>死亡</th>
                </tr>
                </thead>
                <tbody>
                {% for country in country_data %}
                <tr>
                    {% for value in country %}
                    <td>{{ value }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
                </tbody>
            </table>

        </div>
    </div>

    <div id="centerPanel">
        <div id="centerHeader">
            <div class="recentNumber add">
                <div class="icbar nowConfirm"><p class="add">
                    <div class="number">
                        {{ statistics_data['nowConfirm'] }}
                    </div>
                    <div class="text">现有确诊</div>
                </div>
                <div class="icbar confirm"><p class="add">
                    <div class="number">
                        {{ statistics_data['confirm'] }}
                    </div>
                    <div class="text">累计确诊</div>
                </div>
                <div class="icbar heal"><p class="add">
                    <div class="number">
                        {{ statistics_data['heal'] }}
                    </div>
                    <div class="text">累计治愈</div>
                </div>
                <div class="icbar dead"><p class="add">
                    <div class="number">
                        {{ statistics_data['dead'] }}
                    </div>
                    <div class="text">累计死亡</div>
                </div>
            </div>
        </div>
        <div id="map" class="chart-container"></div>
    </div>

    <div id="rightPanel">
        <div id="top10" style="width: 300px;height:300px"></div>
        <div id="news" style="height:320px;overflow:auto">
            <ul class="newsList">
                {% for article in article_data %}
                <li>
                    <div class="time"><span>{{ article[0] }}</span></div>
                    <p class="title">
                        <a href="{{ article[1] }}" target="_blank">{{ article[2] }}</a>
                    </p>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
</div>


<script>


    var toChina = document.getElementById('toChina');
    toChina.onmouseover = function () {
        toChina.style.backgroundColor = "#021525";
    }

    toChina.onclick = function () {
        window.location.href = 'http://127.0.0.1:5200/china';
    }

    toChina.onmouseout = function () {
        toChina.style.backgroundColor = "#204252";
    }

</script>

<script type="text/javascript">

    var top10 = echarts.init(document.getElementById('top10'));
    var top10_result = $.ajax({type: "GET", url: 'http://127.0.0.1:5200/global_top10', data: null, async: false});
    top10_result = JSON.parse(top10_result.responseText);


    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '24小时新增国家 TOP 10',
            textStyle: {
                color: '#FFFFFF'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            show: true,
            type: 'value',
            axisLabel: {
                rotate: 35,
                color: '#FFFFFF',
            },
        },
        yAxis: {
            type: 'category',
            data: top10_result.country,
            axisLabel: {
                color: '#FFFFFF',
            },
        },
        series: [
            {
                name: '',
                type: 'bar',
                barWidth: 10,
                data: top10_result.data
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    top10.setOption(option);

</script>

<script>

    var map_result = $.ajax({type: "GET", url: 'http://127.0.0.1:5200/global_map', data: null, async: false});
    map_result = JSON.parse(map_result.responseText);


    var map = echarts.init(document.getElementById('map'));

    var option = {
        title: {
            left: 'center',
            top: 'top'
        },
        visualMap: {
            show: false,
            min: 0,
            max: 700000,
            left: 'left',
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue'],
            textStyle: {
                color: '#FFFFFF'
            }
        },
        tooltip: {
            "show": true,
            "trigger": "item",
            "formatter": function (params) {
                console.info(params)
                var res = params.name + '<br/>';
                var myseries = option.series;
                for (var i = 0; i < myseries.length; i++) {
                    for (var j = 0; j < myseries[i].data.length; j++) {
                        if (myseries[i].data[j].name == params.name) {
                            res += myseries[i].name + ' : ' + myseries[i].data[j].value + '</br>';
                        }
                    }
                }
                return res;

            },
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0
        },
        series: [
            {
                name: '新增确诊',
                type: 'map',
                mapType: 'world',
                roam: true,
                data: map_result.confirmAdd
            },
            {
                name: '累计确诊',
                type: 'map',
                mapType: 'world',
                roam: true,
                data: map_result.confirm
            },
            {
                name: '治愈',
                type: 'map',
                mapType: 'world',
                roam: true,
                data: map_result.heal
            },
            {
                name: '死亡',
                type: 'map',
                mapType: 'world',
                roam: true,
                data: map_result.dead
            }
        ],
        nameMap: {
            "Canada": "加拿大",
            "Turkmenistan": "土库曼斯坦",
            "Saint Helena": "圣赫勒拿",
            "Lao PDR": "老挝",
            "Lithuania": "立陶宛",
            "Cambodia": "柬埔寨",
            "Ethiopia": "埃塞俄比亚",
            "Faeroe Is.": "法罗群岛",
            "Swaziland": "斯威士兰",
            "Palestine": "巴勒斯坦",
            "Belize": "伯利兹",
            "Argentina": "阿根廷",
            "Bolivia": "玻利维亚",
            "Cameroon": "喀麦隆",
            "Burkina Faso": "布基纳法索",
            "Aland": "奥兰群岛",
            "Bahrain": "巴林",
            "Saudi Arabia": "沙特阿拉伯",
            "Fr. Polynesia": "法属波利尼西亚",
            "Cape Verde": "佛得角",
            "W. Sahara": "西撒哈拉",
            "Slovenia": "斯洛文尼亚",
            "Guatemala": "危地马拉",
            "Guinea": "几内亚",
            "Dem. Rep. Congo": "刚果（金）",
            "Germany": "德国",
            "Spain": "西班牙",
            "Liberia": "利比里亚",
            "Netherlands": "荷兰",
            "Jamaica": "牙买加",
            "Solomon Is.": "所罗门群岛",
            "Oman": "阿曼",
            "Tanzania": "坦桑尼亚",
            "Costa Rica": "哥斯达黎加",
            "Isle of Man": "曼岛",
            "Gabon": "加蓬",
            "Niue": "纽埃",
            "Bahamas": "巴哈马",
            "New Zealand": "新西兰",
            "Yemen": "也门",
            "Jersey": "泽西岛",
            "Pakistan": "巴基斯坦",
            "Albania": "阿尔巴尼亚",
            "Samoa": "萨摩亚",
            "Czech Rep.": "捷克",
            "United Arab Emirates": "阿拉伯联合酋长国",
            "Guam": "关岛",
            "India": "印度",
            "Azerbaijan": "阿塞拜疆",
            "N. Mariana Is.": "北马里亚纳群岛",
            "Lesotho": "莱索托",
            "Kenya": "肯尼亚",
            "Belarus": "白俄罗斯",
            "Tajikistan": "塔吉克斯坦",
            "Turkey": "土耳其",
            "Afghanistan": "阿富汗",
            "Bangladesh": "孟加拉国",
            "Mauritania": "毛里塔尼亚",
            "Dem. Rep. Korea": "朝鲜",
            "Saint Lucia": "圣卢西亚",
            "Br. Indian Ocean Ter.": "英属印度洋领地",
            "Mongolia": "蒙古",
            "France": "法国",
            "Cura?ao": "库拉索岛",
            "S. Sudan": "南苏丹",
            "Rwanda": "卢旺达",
            "Slovakia": "斯洛伐克",
            "Somalia": "索马里",
            "Peru": "秘鲁",
            "Vanuatu": "瓦努阿图",
            "Norway": "挪威",
            "Malawi": "马拉维",
            "Benin": "贝宁",
            "St. Vin. and Gren.": "圣文森特和格林纳丁斯",
            "Korea": "韩国",
            "Singapore": "新加坡",
            "Montenegro": "黑山共和国",
            "Cayman Is.": "开曼群岛",
            "Togo": "多哥",
            "China": "中国",
            "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
            "Armenia": "亚美尼亚",
            "Falkland Is.": "马尔维纳斯群岛（福克兰）",
            "Ukraine": "乌克兰",
            "Ghana": "加纳",
            "Tonga": "汤加",
            "Finland": "芬兰",
            "Libya": "利比亚",
            "Dominican Rep.": "多米尼加",
            "Indonesia": "印度尼西亚",
            "Mauritius": "毛里求斯",
            "Eq. Guinea": "赤道几内亚",
            "Sweden": "瑞典",
            "Vietnam": "越南",
            "Mali": "马里",
            "Russia": "俄罗斯",
            "Bulgaria": "保加利亚",
            "United States": "美国",
            "Romania": "罗马尼亚",
            "Angola": "安哥拉",
            "Chad": "乍得",
            "South Africa": "南非",
            "Fiji": "斐济",
            "Liechtenstein": "列支敦士登",
            "Malaysia": "马来西亚",
            "Austria": "奥地利",
            "Mozambique": "莫桑比克",
            "Uganda": "乌干达",
            "Japan": "日本",
            "Niger": "尼日尔",
            "Brazil": "巴西",
            "Kuwait": "科威特",
            "Panama": "巴拿马",
            "Guyana": "圭亚那",
            "Madagascar": "马达加斯加",
            "Luxembourg": "卢森堡",
            "American Samoa": "美属萨摩亚",
            "Andorra": "安道尔",
            "Ireland": "爱尔兰",
            "Italy": "意大利",
            "Nigeria": "尼日利亚",
            "Turks and Caicos Is.": "特克斯和凯科斯群岛",
            "Ecuador": "厄瓜多尔",
            "U.S. Virgin Is.": "美属维尔京群岛",
            "Brunei": "文莱",
            "Australia": "澳大利亚",
            "Iran": "伊朗",
            "Algeria": "阿尔及利亚",
            "El Salvador": "萨尔瓦多",
            "C?te d'Ivoire": "科特迪瓦",
            "Chile": "智利",
            "Puerto Rico": "波多黎各",
            "Belgium": "比利时",
            "Thailand": "泰国",
            "Haiti": "海地",
            "Iraq": "伊拉克",
            "S?o Tomé and Principe": "圣多美和普林西比",
            "Sierra Leone": "塞拉利昂",
            "Georgia": "格鲁吉亚",
            "Denmark": "丹麦",
            "Philippines": "菲律宾",
            "S. Geo. and S. Sandw. Is.": "南乔治亚岛和南桑威奇群岛",
            "Moldova": "摩尔多瓦",
            "Morocco": "摩洛哥",
            "Namibia": "纳米比亚",
            "Malta": "马耳他",
            "Guinea-Bissau": "几内亚比绍",
            "Kiribati": "基里巴斯",
            "Switzerland": "瑞士",
            "Grenada": "格林纳达",
            "Seychelles": "塞舌尔",
            "Portugal": "葡萄牙",
            "Estonia": "爱沙尼亚",
            "Uruguay": "乌拉圭",
            "Antigua and Barb.": "安提瓜和巴布达",
            "Lebanon": "黎巴嫩",
            "Uzbekistan": "乌兹别克斯坦",
            "Tunisia": "突尼斯",
            "Djibouti": "吉布提",
            "Greenland": "格陵兰",
            "Timor-Leste": "东帝汶",
            "Dominica": "多米尼克",
            "Colombia": "哥伦比亚",
            "Burundi": "布隆迪",
            "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
            "Cyprus": "塞浦路斯",
            "Barbados": "巴巴多斯",
            "Qatar": "卡塔尔",
            "Palau": "帕劳",
            "Bhutan": "不丹",
            "Sudan": "苏丹",
            "Nepal": "尼泊尔",
            "Micronesia": "密克罗尼西亚",
            "Bermuda": "百慕大",
            "Suriname": "苏里南",
            "Venezuela": "委内瑞拉",
            "Israel": "以色列",
            "St. Pierre and Miquelon": "圣皮埃尔和密克隆群岛",
            "Central African Rep.": "中非",
            "Iceland": "冰岛",
            "Zambia": "赞比亚",
            "Senegal": "塞内加尔",
            "Papua New Guinea": "巴布亚新几内亚",
            "Trinidad and Tobago": "特立尼达和多巴哥",
            "Zimbabwe": "津巴布韦",
            "Jordan": "约旦",
            "Gambia": "冈比亚",
            "Kazakhstan": "哈萨克斯坦",
            "Poland": "波兰",
            "Eritrea": "厄立特里亚",
            "Kyrgyzstan": "吉尔吉斯斯坦",
            "Montserrat": "蒙特塞拉特",
            "New Caledonia": "新喀里多尼亚",
            "Macedonia": "马其顿",
            "Paraguay": "巴拉圭",
            "Latvia": "拉脱维亚",
            "Hungary": "匈牙利",
            "Syria": "叙利亚",
            "Honduras": "洪都拉斯",
            "Myanmar": "缅甸",
            "Mexico": "墨西哥",
            "Egypt": "埃及",
            "Nicaragua": "尼加拉瓜",
            "Cuba": "古巴",
            "Serbia": "塞尔维亚",
            "Comoros": "科摩罗",
            "United Kingdom": "英国",
            "Fr. S. Antarctic Lands": "南极洲",
            "Congo": "刚果（布）",
            "Greece": "希腊",
            "Sri Lanka": "斯里兰卡",
            "Croatia": "克罗地亚",
            "Botswana": "博茨瓦纳",
            "Siachen Glacier": "锡亚琴冰川地区"
        }
    };
    map.setOption(option);


</script>
</body>
</html>